<template>
  <div>
    <div class="xq">
      <el-container>
        <el-page-header @back="goBack"> </el-page-header>
        <el-header class="zt"> 传智健康 </el-header>
      </el-container>
    </div>
    <br />
    <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">性别</el-menu-item>
      <el-menu-item>|</el-menu-item>
      <el-submenu index="2">
        <template slot="title">请选择性别</template>
        <el-menu-item index="2-1">男</el-menu-item>
        <el-menu-item index="2-2">女</el-menu-item>
        <el-menu-item index="2-3">不限</el-menu-item>
      </el-submenu>
    </el-menu>
    <hr class="h1" />

    <!-- <router-view :list="list" name="view"></router-view> -->
    <!-- <template id="view"> -->
      <div v-for="item in mapObjk" :key="item.id" @click="dian(item)">
       <div class="content">
          <div>
            <img class="demo-image__lazy1" :src="item.img" /><img />
          </div>
          <div class="rigth">
            <h2 class="rigthCont">{{item.name}}</h2>
            <span class="rigthCont">{{item.remark}}</span>
            <div class="biaqian">
            <el-tag  type="danger" disabled size="small" ><i class="el-icon-user-solid">{{item.sex == 0 ? '女' : (item.sex == 1 ? '男' : '男女单人')}}</i></el-tag>
             <el-tag  type="danger" disabled size="small"
            ><i class="el-icon-s-custom">{{item.minage}}---{{item.maxage}}</i></el-tag>
            </div>
            <el-button type="primary" class="chaBtn">查看
            </el-button>
          </div>
          <hr/>
        </div>
      </div>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import HealthFx from '@/views/HealthFx.vue';
Vue.use(VueAxios, axios);
export default {
  components: { HealthFx },
  data() {
    return {
      mapObjk: [],
    };
  },

  methods: {
    handleSelect() {},
    loadA() {
      console.log("调用")
      axios.get("/abb/TSetmealControll/settsetmealAll").then(res => {
        this.mapObjk = res.data;
        console.log(this.mapObjk);
      });
    },
    // 性别选择框
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    goBack() {
      this.$router.go(-1);
    },
    dian(item){
      //1.2A t_setmeal_checkgroup`套餐检查分组关联表 根据不同套餐的id查,展示套餐名,一些项目名称,项目解读
      axios.post("/abb/TSetmealCheckgroupController/TSetmealCheckgroupA/"+item.id).then((res) =>{
         if(res.data!=null){
          //  console.log("进来过这个"+res.data)
            this.$router.push({path:"/Checkgroup",query:{value:JSON.stringify(res.data)}})
         }else{console.log("错误")}

        })
    }
  },
  created() {
    this.loadA();
  },
};
</script>

<style>
.rigthCont{
  display: flex;
  justify-content: start;
  margin-top: 5px;
}
.biaqian{
   display: flex;
  justify-content: start;
    margin-top: 15px; ;
}
.rigth{
  max-width: 100%;
  min-height: 150px;
  align-content: center;
  margin-top: -170px;
  margin-left: 600px;
}
.xx1{
  background-color: aquamarine;
}
.select-drop {
  
  position: relative;
  border-bottom: 1px solid #eee;
  padding: 1% 3%;
  background-color: #fff;
}
.zt {
  position: relative;
  top: -15px;
}
.xq {
  background-color: black;
  color: aliceblue;
  text-align: center;
  height: 40px;
}
.xx {
  position: relative;
  top: -450px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.xb {
  position: relative;
  left: -480px;
}
.bb {
  position: relative;
  right: 580px;
}
.demo-image__lazy1 {
  display: flex;
  justify-content: start;
  margin-left: 100px;
  width: 300px;
  height: 150px;
  background-color:red;
}
.demo-image__lazy2 {
  position: relative;
  width: 300px;
  height: 150px;
  right: 480px;
  top: -60px;
}
.demo-image__lazy3 {
  position: relative;
  width: 300px;
  height: 150px;
  right: 480px;
  top: -60px;
}
.demo-image__lazy4 {
  position: relative;
  width: 300px;
  height: 150px;
  right: 480px;
  top: -60px;
}
.demo-image__lazy5 {
  position: relative;
  width: 300px;
  height: 150px;
  right: 480px;
  top: -60px;
}
.wz {
  background-color: black;
  /* float: left; */
  /* position: relative; */
  /* top: -200px;
  right: 60px; */
  min-width: 200px;
  max-height: 100px;
}
.wz1 {

  position: relative;
  top: 40px;
  right: 90px;
}
.wz2 {
  position: relative;
  left: 257px;
  top: 10px;
  right: -190px;
}
.q2 {
  position: relative;
  top: -200px;
  right: 147px;
}
.q3 {
  position: relative;
  top: -230px;
  right: -200px;
}
.xb1 {
  position: relative;
  top: 55px;
  left: -570px;
}
.xb2 {
  position: relative;
  top: 55px;
  left: -560px;
}
.q4 {
  position: relative;
  top: -175px;
  left: -630px;
}
.q5 {
  position: relative;
  top: -175px;
  left: -620px;
}
.ck {
  position: relative;
  top: 90px;
  right: -30px;
}
.q6 {
  position: relative;
  top: -130px;
  right: 35px;
}
.nm {
  position: relative;
  left: 54px;
  top: 100px;
}
.q7 {
  position: relative;
  top: -125px;
}
</style>